<template>
	<view class="content">
		<view class="from">
			<view class="form-box" style="border-top: 1px solid #F9F9F9;">
				<view class="form-item">
					<view class="form-lable">选择身份 <text>*</text></view>
					<view class="form-content">
						<u-radio-group v-model="sfid">
							<u-radio label-size='40rpx' width='30rpx' @change="radioChange(item)" v-for="(item, index) in sflist" :key="index"
								:name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="form-item">
					<view class="form-lable">系部 <text>*</text></view>
					<view class="form-content u-flex u-row-between" @click="chooseLocation">
						<text :style="from.group_name == '请选择系部' ? 'color: #808080;' :''">{{from.group_name}}</text>
						<u-select v-model="show" mode="mutil-column-auto" :list="list_xb" @confirm="confirm_dz"
							label-name="name" child-name="list" value-name="id"></u-select>
					</view>
				</view>

				<view class="form-item" v-if='from.type == "student"'>
					<view class="form-lable">班级 <text>*</text></view>
					<view class="form-content">
						<input v-model="from.class_name" type="text" placeholder="请输入您的班级">
					</view>
				</view>
				<view class="form-item" v-if='from.type == "student"'>
					<view class="form-lable">学生证号 <text>*</text></view>
					<view class="form-content">
						<input v-model="from.student_code" type="text" placeholder="请输入您的学生证号">
					</view>
				</view>
				<view class="form-item" v-if="from.type == 'department'">
					<view class="form-lable">处室 <text>*</text></view>
					<view class="form-content">
						<input v-model="from.class_name" type="text" placeholder="请输入您的班级">
					</view>
				</view>
				<view class="form-item" v-if="from.type == 'department'">
					<view class="form-lable">教师工号 <text>*</text></view>
					<view class="form-content">
						<input v-model="from.student_code" type="text" placeholder="请输入您的学生证号">
					</view>
				</view>
				<view class="form-item">
					<view class="form-lable">性别 <text>*</text></view>
					<view class="form-content">
						<u-radio-group  v-model="sex">
							<u-radio @change="radioChangesex(item)" label-size='40rpx' v-for="(item, index) in sexlist" :key="index"
								:name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="form-item">
					<view class="form-lable">是否是报修员 <text>*</text></view>
					<view class="form-content">
						<u-radio-group  v-model="bxid">
							<u-radio @change="radioChangebx(item)" label-size='40rpx' v-for="(item, index) in bxlist" :key="index"
								:name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>

			</view>
		</view>
		<button class="u-reset-button btn-moren" style="margin-top: 350rpx;" @click="save_personal">提交</button>
		<!-- <u-select v-model="showClass" :default-value="[index]" :list="list" label-name="name" value-name="id" @confirm="confirm"></u-select> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list_xb: [],
				from: {
					class_name: '',
					group_id: '',
					group_name: '请选择系部',
					student_code: '',
					gender:'',
					type:'',
					is_repair:0,
				},
				sflist: [{
						name: '学生',
						disabled: false
					},
					{
						name: '处室',
						disabled: false
					}
				],
				sfid: '',
				sexlist:[{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}],
				sex:'',
				bxlist:[{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}],
				bxid:''
			}
		},
		onLoad(e) {

			this.getGrouplist()
			// this.getpwesonal()
		},
		methods: {
			//切换身份单选按钮
			radioChange(e) {
				// console.log(e)
				if (e.name == '学生') {
					return this.from.type = 'student'
				}
				if (e.name == '处室') {
					return this.from.type = 'department'
				}
			},
			radioChangesex(e) {
				// console.log(e)
				if (e.name == '女') {
					return this.from.gender = 0
				}
				if (e.name == '男') {
					return this.from.gender = 1
				}
			},
			radioChangebx(e){
				// console.log(e)
				if (e.name == '否') {
					return this.from.is_repair = 0
				}
				if (e.name == '是') {
					return this.from.is_repair = 1
				}
			},

			//获取个人资料
			getpwesonal() {
				this.$u.post('/user/basic_list ', {}).then(res => {
					// console.log(JSON.stringify(res.data))
					this.from.class_name = res.data.class_name
					this.from.student_code = res.data.student_code
					this.from.group_id = res.data.group_id
					this.from.type = JSON.parse(JSON.stringify(res.data.type))
					this.from.gender = JSON.parse(JSON.stringify(res.data.gender))
					this.from.is_repair = JSON.parse(JSON.stringify(res.data.is_repair))
					this.list_xb.forEach(element => {
						if (element.id == res.data.group_id) {
							this.from.group_name = element.name
						}
						// console.log(JSON.stringify(element))
					});
					this.sfid = res.data.type=='student'?'学生':'处室'
					// console.log(this.sfid)
					// this.sex = res.data.gender=='1'?'男':'女'
					// this.bxid = res.data.is_repair=='1'?'是':'否'
					if(res.data.gender=='0' || res.data.gender==null){
						this.sex = '女'
					}else{
						this.sex = '男'
					}
					if(res.data.is_repair=='0' || res.data.is_repair==null){
						this.bxid = '否'
					}else{
						this.bxid = '是'
					}
					

				})
			},

			// 获取院系列表
			getGrouplist() {
				this.$u.post('/user/grouplist ', {}).then(res => {
					this.list_xb = res.data
					this.getpwesonal()
					//console.log(JSON.stringify(res.data))

				})
			},
			//选择院系
			chooseLocation() {
				let that = this
				that.show = true

			},
			//获取选择院系id
			confirm_dz(e) {
				this.from.group_name = e[0].label
				this.from.group_id = e[0].value
				//console.log(JSON.stringify(e));
			},
			//提交修改
			save_personal() {
				if (this.from.group_id == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择您的系部'
					})
					return
				}
				if(this.from.type == 0){
					if (this.from.class_name == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入您的班级'
						})
						return
					}
					
					if (this.from.student_code == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入您的学生证号'
						})
						return
					}					
				}
				if(this.from.type == 1){
					if (this.from.class_name == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入您的处室'
						})
						return
					}
					
					if (this.from.student_code == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入您的教师工号'
						})
						return
					}					
				}
				// console.log(JSON.stringify(this.from.gender))
				if (this.from.gender === '') {
					uni.showToast({
						icon: 'none',
						title: '请选择您的性别'
					})
					return
				}
				// if (this.from.is_repair === '' || this.from.is_repair === null) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择您的身份'
				// 	})
				// 	return
				// }
				// console.log(this.from)
				this.$u.post('user/basic_save', {
					...this.from
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
					
				}).catch(res=>{
					uni.showToast({
						icon: 'error',
						title: res.data
					})
				})
			},

			//==================
		}
	}
</script>

<style lang="less">
	.btn-moren {
		height: 100rpx;
		font-size: 50rpx;
	}

	.content {
		padding: 0;
		padding-bottom: 60rpx;
	}

	.form-box {
		background: #fff;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
	}

	.form-item {
		display: flex;
		min-height: 90rpx;
		align-items: center;
		border-bottom: 1px solid #EAEAEA;
	}

	.form-lable {
		font-size: 45rpx;
		flex-shrink: 0;
		margin-right: 20rpx;

		text {
			color: #E60012;
		}
	}

	.form-content {
		width: 100%;
		// display: flex;
		font-size: 37rpx;

		textarea {
			width: 100%;
			height: 135rpx;
		}
	}

	.column {
		.form-lable {
			justify-content: flex-start;
			align-items: flex-start;
		}

		justify-content: flex-start;
		flex-direction: column;
		align-items: flex-start;
	}

	.form-title {
		font-size: 30rpx;
		font-weight: bold;
		// margin-bottom: 40rpx;
	}

	/deep/ .u-list-item {
		margin: 9rpx !important;
	}
</style>
